<script lang="ts" setup>
import { useSlots,computed } from 'vue';
const slots = useSlots();

const props = defineProps({
    iBoxShadow: {
        type: Boolean,
        default: false,
    },
    iLinearGradien: {
        type: Boolean,
        default: false,
    },
    iFontSize: {
        type: String,
        default: "",
    },
    iColor: {
        type: String,
        default: "",
    },
    iHeight: {
        type: String,
        default: "",
    },
    iPadding: {
        type: String,
        default: "",
    },
    iBgColor: {
        type: String,
        default: ''
    }
});

//配置按钮样式
const themeVars = computed(() => ({
    buttonNormalFontSize: `${props.iFontSize}`,
    buttonDefaultHeight: `${props.iHeight}`,
    buttonDefaultColor: `${props.iColor}`,
    buttonNormalPadding: `${props.iPadding}`,
    buttonDefaultBackground: `${props.iBgColor}`
}));


//防止事件冒泡
const handleClick = (event: Event) => {
    event.stopPropagation();
};

</script>

<template>
    <van-config-provider :theme-vars="themeVars" class="h-[100%]">
        <van-button v-bind="$attrs" @click="handleClick"
            :class="{ box_shadow: iBoxShadow, linear_gradien: iLinearGradien }" :style="{ color: props.iColor,background: props.iBgColor}">
            <template v-for="(value, name) in slots" #[name]="scope">
                <slot :name="name" v-bind="scope || {}"></slot>
            </template>
        </van-button>
    </van-config-provider>
</template>

<style lang="scss" scoped>
:deep(.van-button) {
    border: none;
}

.box_shadow {
    box-shadow: 1px 1px 1px $color3;
}

.linear_gradien {
    background: linear-gradient(135deg, #FF0000 0%, #FF3A37 100%)
}
</style>